<template>
    <div class="statistical">
        <div class="statistical-card flex_row">
            <searchBar :tab="tab" :left_col_span="left_col_cspan" :right_col_span="right_col_cspan"
                :left_col2_span="left_col2_cspan" :shop_ls="shop_cls" :staff_ls="store_staff_cls"
                :order_ls="store_order_ls" :group_ls="store_group_ls" @selectHandle="selectHandle" ref="searchBarRef" />
        </div>
        <div class="content-box flex_between">
            <div class="left_content" ref="contentBoxRef">
                <div class="flex_between" ref="pointsBoxRef" style="height: 36px;">
                    <h3>{{ tab.label + '列表' }}</h3>
                </div>
                <div class="left_content_box">
                    <LoadList :loading="store_loading" :no-more="store_hasMore" :containerHeight="dynamicHeight"
                        :distance="100" @load-more="storeLoadMoreData">
                        <template v-if="store_count_ls && store_count_ls.length > 0">
                            <div v-for="(ls, lsindex) in store_count_ls" :key="lsindex" @click.stop="cardsClick(ls)">
                                <cards :item_ls="ls" :tab="tab" :currentId="store_currentId">
                                    <template #rel_name_bottom>
                                        <div v-if="tab.id == 'product' || tab.id == 'service'">
                                            <div class="flex_between">
                                                <div class="flex1">
                                                    <span class="font_size12 font_black8"> {{ ls.brand || '--' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="tab.id == 'customer'">
                                            <div class="flex_between">
                                                <div class="flex1">
                                                    <span class="font_size12 font_black8"> {{ ls.company || '--' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </cards>
                            </div>
                        </template>
                        <template v-else>
                            <empty></empty>
                        </template>
                    </LoadList>
                </div>
            </div>
            <div class="right_content" ref="contentBoxRef">
                <div class="flex_between" ref="pointsBoxRef" style="height: 36px;">
                    <h3 class="mr10">{{ tab.label + '销售记录' }}</h3>
                    <div class="flex1 flex_row">
                        <searchBar :is_show_title="false" :tab="tab" :shop_ls="[]" :staff_ls="[]"
                            :group_ls="store_group_ls" :order_ls="[]" :product_ls="store_product_ls"
                            @selectHandle="select2Handle" :left_col_span="5" :right_col_span="19"
                            :left_col2_span="24" />
                    </div>
                </div>
                <div class="right_content_box" :style="{ height: dynamicHeight + 18 + 'px' }">
                    <template v-if="store_count_ls && store_count_ls.length > 0">
                        <headerCard :item_info="{ ...shop_info, ...store_count, ...item_ls, }">
                            <template #rel_name_bottom>
                                <div class="flex_between" v-if="tab.id == 'product' || tab.id == 'service'">
                                    <div class="flex1">
                                        <span class="font_size12 font_black8" v-if="shop_info.brand"> {{ shop_info.brand || '--'}}
                                        </span>
                                        <span class="font_size12 font_black8" v-else> {{ item_ls.brand || '--' }} </span>
                                    </div>
                                </div>
                                <div v-if="tab.id == 'customer'">
                                    <div class="flex_between">
                                        <div class="flex1">
                                            <span class="font_size12 font_black8" v-if="shop_info.company"> {{
                                                shop_info.company || '--' }} </span>
                                            <span class="font_size12 font_black8" v-else> {{ item_ls.company || '--' }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </headerCard>
                        <ayjTable style="width: 99%;" :columns="columns" :data="store_list"
                            :hasMore="store_detail_hasMore" :loading="store_detail_loading"
                            :height="dynamicHeight - 110" @load-more="loadMoreData">
                            <template #column-amount="{ row }">
                                <span :class="'font_bule'">{{ row.amount || 0 }} </span>
                            </template>
                            <template #column-company="{ row }">
                                <span>{{ row.company || '--' }} </span>
                            </template>
                            <template #column-profit="{ row }">
                                <span :class="row.profit > 0 ? 'font_green' : 'font_red'">{{ row.profit || '--' }}
                                </span>
                            </template>
                        </ayjTable>
                    </template>
                    <template v-else>
                        <empty></empty>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, watch, defineProps, defineExpose } from '@vue/composition-api'
import searchBar from './com/searchBar.vue'
import cards from './com/cards.vue'
import headerCard from './com/headerCard.vue'
import { useDynamicHeight } from '@/hooks/useDynamicHeight'
import { useStatisticalState } from '@/components/report/hooks/useStatisticalState'
import LoadList from "@/components/commV2/LoadList/index.vue";
const contentBoxRef = ref(null)
const pointsBoxRef = ref(null)
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: contentBoxRef,
    subtractRef: pointsBoxRef,
    extraHeight: 45 // 额外的间距
})

const {
    store_count_ls,
    store_staff_ls,
    store_group_ls,
    store_order_ls,
    getStoresList,
    store_currentId,
    store_product_ls,
    store_query,
    store_list,
    getStoreSellLsData,
    store_loading,
    store_hasMore,
    storeLoadMoreData,
    shop_info,
    store_count,
    store_detail_loading,
    store_detail_hasMore,
    store_query_detail,
    store_shop_ls
} = useStatisticalState()

const props = defineProps({
    tab: {
        type: Object,
        default: () => ({
            label: '门店',
            id: 'store'
        })
    },
})

const shop_cls = computed(() => {
    return props.tab.id != 'store' ? store_shop_ls.value : []
})

const store_staff_cls = computed(() => {
    return props.tab.id != 'member' ? store_staff_ls.value : []
})

const left_col_cspan = computed(() => {
    return props.tab.id != 'store' ? 10 : 7
})

const right_col_cspan = computed(() => {
    return props.tab.id != 'store' ? 14 : 17
})

const left_col2_cspan = computed(() => {
    return props.tab.id != 'store' ? 8 : 12
})

const columns = computed(() => {
    let baseColumns = [
        {
            title: '序号',
            prop: 'index',
            width: '50px',
            align: 'center',
            render: (row, column, index) => index + 1,
        },
        { title: '用户名', prop: 'customer_name', width: '160px' },
        { title: '公司', prop: 'company', width: '160px', slot: true },
        { title: '金额', prop: 'amount', slot: true },
        { title: '毛利', prop: 'profit', slot: true },
        { title: '销量', prop: 'number_min', },
    ]
    // 根据不同的 tab.id 添加不同的时间字段
    if (props.tab.id === 'store') {
        baseColumns.push({ title: '时间', prop: 'etime' })
    } else if (props.tab.id === 'product') {
        baseColumns.push({ title: '销售时间', prop: 'atime' })
    } else if (props.tab.id === 'service') {
        baseColumns.push({ title: '服务时间', prop: 'atime' })
    } else if (props.tab.id === 'reserva') {
        baseColumns.push({ title: '预约时间', prop: 'atime' })
    } else if (props.tab.id === 'customer') {
        baseColumns = [
            {
                title: '序号',
                prop: 'index',
                width: '50px',
                align: 'center',
                render: (row, column, index) => index + 1,
            },
            { title: '用户名', prop: 'customer_name', width: '160px' },
            { title: '总额', prop: 'amount', slot: true },
            { title: '总量', prop: 'number' },
            { title: '商品', prop: 'gdname' },
            { title: '品牌', prop: 'brand' },
        ]
    } else if (props.tab.id === 'member') {
        baseColumns.push({ title: '时间', prop: 'etime' })
    }
    return baseColumns
})

const selectHandle = (val) => {
    if (props.tab.id != 'store') {
        store_query.value.shopid = val.shopid
    }
    store_query.value.page = 1
    store_query.value.pfrom = 0
    store_count_ls.value = []
    store_query.value.order = val.order
    store_query.value.time = val.group
    store_query.value.stime = val.stime
    store_query.value.dtime = val.dtime
    store_query.value.uid_cp = val.uid_cp
    getStoresList()
}

const select2Handle = (val) => {
    store_query_detail.value.page = 1
    store_query_detail.value.pfrom = 0
    store_list.value = []
    store_query_detail.value.is_yy = val.is_yy
    store_query_detail.value.time = val.group
    store_query_detail.value.stime = val.stime
    store_query_detail.value.dtime = val.dtime
    getStoreSellLsData()
}

watch(() => props.tab, (newVal) => {
    console.log("newVal=", newVal)
}, {
    deep: true
})

const item_ls = ref({})
// 需要从列表传参数据到右边显示
const hasInfoRight = ref(['product', 'customer', 'member', 'service'])
const cardsClick = (val) => {
    item_ls.value = {}
    shop_info.value = {}
    if (store_currentId.value == val.rel_id) { return }
    if (hasInfoRight.value.includes(props.tab.id)) {
        item_ls.value = val
    }
    store_list.value = []
    store_currentId.value = val.rel_id
    store_query_detail.value.customerid = val.rel_id
    store_query_detail.value.shopid = val.rel_id
    store_query_detail.value.staffid = val.rel_id
    store_query_detail.value.gdid = val.rel_id
    getStoreSellLsData()
}

const loadMoreData = async () => {
    store_query_detail.value.page += 1
    store_query_detail.value.pfrom = (store_query_detail.value.page - 1) * staticConst.PAGE_SIZE
    getStoreSellLsData()
}
const searchBarRef = ref(null)
const initFc = () => {
    item_ls.value = {}
    searchBarRef.value.resetFc()
    getStoresList()
}

onMounted(() => {
    // 在组件挂载后更新高度
    nextTick(() => {
        updateHeight()
    })
})

defineExpose({
    initFc
})
</script>

<style scoped lang="scss">
.statistical {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.statistical-card {
    flex-shrink: 0;
}

.content-box {
    box-sizing: border-box;
    padding: 0 10px;
    flex: 1;
    width: 100%;
    background: radial-gradient(18.89% 26.1% at 11.64% 11.63%, rgba(153, 102, 255, .15) 0, rgba(173, 51, 255, 0) 69.26%),
        radial-gradient(22.92% 24.7% at 96.41% 8.29%, rgba(0, 85, 255, .12) 0, rgba(204, 231, 255, .03) 100%),
        linear-gradient(180deg, #e0ecff, #edf2fa 13.9%, #f7f8fa 32.56%, #f5f6f7);
    background-color: #f6f7f9;
}

.left_content,
.right_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
}

.left_content {
    width: 40%;
}

.right_content {
    flex: 1;
}

.left_content_box,
.right_content_box {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    margin-top: 4px;
    // height: 700px;
    overflow: auto;
    overflow-y: auto;
}
</style>
